<template>
  <div class="planet-chart-gauge" ref="board2Width">
    <template v-if="inPage=='preview' || inPage=='dataBoard'">
      <template v-for="(item, index) in chartsData">
        <div :style="{width:box_list_width+'px', height: box_list_height+'px'}" :key="index">
          <!--          <div :id="item.componentsId" :key="index" class="echartMap-line"></div>-->
          <components is="gauge" :optionData="item" :sizeNumber="sizeNumber" :componentsId="item.componentsId"
                      :inPage="inPage"></components>
        </div>
      </template>
    </template>
    <template v-if="inPage=='compontents'">
      <div id="board2compontents" style="width: 100%;height: 100%"></div>
    </template>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {paneldetailData, paneldetailList} from "@/api/system/board"

require('echarts/theme/macarons')

export default {
  props: ['keyData', 'inPage', 'componentsId', 'sizeNumber'], // compontents preview dataBoard
  name: "board2",
  data() {
    return {
      value: false,
      chartsData: [],
      box_list_width: 0,
      box_list_height: 0
    }
  },
  watch: {
    keyData() {
      console.log('仪表盘的数据来了：', this.keyData, this.$refs.board2Width.offsetWidth)
      let n = this
      let list_ = JSON.parse(JSON.stringify(n.keyData))

      if (this.keyData.length <= 4) {
        this.box_list_width = (this.$refs.board2Width.offsetWidth / this.keyData.length) - .5
        this.box_list_height = this.$refs.board2Width.offsetHeight
      } else {
        this.box_list_width = this.$refs.board2Width.offsetWidth / 3
        this.box_list_height = this.$refs.board2Width.offsetHeight / Math.ceil(this.keyData.length / 3)
      }
      for (let index in list_) {
        let item = list_[index]
        if (n.inPage === 'dataBoard') {
          item.componentsId = `board2${n.componentsId}${index}`
        } else {
          item.componentsId = `board2${index}`
        }
      }
      this.chartsData = []
      this.chartsData = JSON.parse(JSON.stringify(list_))
      // this.$nextTick(() => {
      //   n.initChart(1)
      // })
    },
    sizeNumber() {
      console.log('sizeNumber,', this.sizeNumber)
      if (this.keyData.length <= 4) {
        this.box_list_width = this.$refs.board2Width.offsetWidth / this.keyData.length
        this.box_list_height = this.$refs.board2Width.offsetHeight
      } else {
        this.box_list_width = this.$refs.board2Width.offsetWidth / 3
        this.box_list_height = this.$refs.board2Width.offsetHeight / Math.ceil(this.keyData.length / 3)
      }
      console.log('box_list_width', this.$refs.board2Width.offsetWidth, this.$refs.board2Width.offsetHeight, this.box_list_width, this.box_list_height)

    }
  },
  created() {
  },
  mounted() {
    let n = this
    if (this.inPage === 'compontents') {
      this.initChart('board2compontents')
    }
    if ((this.inPage === 'preview' || this.inPage === 'dataBoard') && this.keyData && this.keyData.length) {
      n.$nextTick(() => {
        setTimeout(() => {
          if (n.keyData.length <= 4) {
            n.box_list_width = n.$refs.board2Width.offsetWidth / n.keyData.length
            n.box_list_height = n.$refs.board2Width.offsetHeight
            console.log('宽高：', n.$refs.board2Width.offsetWidth, n.box_list_width)
          } else {
            n.box_list_width = n.$refs.board2Width.offsetWidth / 3
            n.box_list_height = n.$refs.board2Width.offsetHeight / Math.ceil(n.keyData.length / 3)
          }
          if(this.inPage === 'preview'){
            let list_ = JSON.parse(JSON.stringify(n.keyData))
            n.chartsData = []
            for (let index in list_) {
              let item = list_[index]
              item.componentsId = `board2${index}`
              n.chartsData.push(item)
            }
          }else{
            n.getData()
          }

        }, 100)
      })
    }
    // if (this.inPage === 'dataBoard') {
    //   n.getData()
    // }
  },
  methods: {
    getData() {
      paneldetailData({id: this.componentsId}).then(res => {
        console.log('请求数据内容==============》', res)
        let {data} = res
        let list_ = JSON.parse(JSON.stringify(this.keyData))
        this.chartsData = []
        for (let index in list_) {
          let item = list_[index]
          item.componentsId = `board2${this.componentsId}${index}`
          item.data = data[index].data
          this.chartsData.push(item)
        }
      })
    },
    initChart(id) {
      console.log('id====>', id)
      let chartDom = document.getElementById(id);
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            detail: {
              valueAnimation: true,
              fontSize: 18,
              formatter: '{value}',
              color: 'inherit'
            },
            pointer: {
              width: 3,
              itemStyle: {
                color: 'inherit',
              }
            },
            axisLabel: {
              color: 'inherit',
              distance: 10,
              fontSize: 10
            },
            //表圈
            axisTick: {
              distance: 2,
              length: 4,
              lineStyle: {
                color: 'inherit',
                width: 1
              }
            },
            splitLine: {
              distance: 2,
              length: 6,
              lineStyle: {
                color: '#000',
                width: 2
              }
            },
            axisLine: {
              lineStyle: {
                width: 6,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            data: [
              {
                value: 10,
                name: 'temperature'
              }
            ]
          }
        ]
      };
      if (this.inPage === 'compontents') {
        setInterval(function () {
          myChart.setOption({
            series: [
              {
                data: [
                  {
                    value: +(Math.random() * 100).toFixed(2),
                    name: 'temperature'
                  }
                ]
              }
            ]
          });
        }, 2000);
      }
      option && myChart.setOption(option);
      // if (this.inPage === 'preview' && index < this.keyData.length) {
      //   this.initChart(index + 1)
      // }
    }
  }
}
</script>

<style scoped>
.echartMap-line {
  height: 100%;
  width: 100%;
}

.planet-chart-gauge {
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
